<template>
  <div style="overflow: hidden; height: 100vh">
    <div>
      <h1>404 Not Found ! ! !</h1>
      <p>The page you are looking for does not exist.</p>
      <router-link to="/">Go Home</router-link>
      <img src="../assets/404.png" alt="" style="width: 100%; height: 100%">
    </div>

  </div>

</template>

<script>
export default {
  name: "NotFound"
}
</script>

<style scoped>
.not-found {
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.background {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-size: cover;
  opacity: 0.5;
  z-index: -1;
}
.content {
  background-color: white;
  padding: 2rem;
  text-align: center;
  border-radius: 0.5rem;
  box-shadow: 0 0 1rem rgba(0, 0, 0, 0.2);
}
</style>
